<template>
	<view class="containerC">
		<u-skeleton rows="5" :loading="loading" :title="false"  :rowsWidth="[700,700,700,700,700]" :rowsHeight="[80,80,300,300,300]">
			<view class="header" :style="{width:cardWidth*0.9+'px', height: cardHeight*0.05+'px'}" style="display: flex;flex-direction: column;align-items: center;">
				<view class="range">
					<span style="transition: all 0.2s ease-in;" @click="range=0" :style="{borderBottom: range==0 ? '7upx solid rgba(14,176,201,1)' : '7upx solid rgba(14,176,201,0)'}">本校</span>
					<span style="margin-left: 30upx;transition: all 0.3s ease-in;" @click="range=1" :style="{borderBottom: range==1 ? '7upx solid rgba(14,176,201,1)' : '7upx solid rgba(14,176,201,0)'}">全国高校</span>
				</view>
				<view class="kind">
					<view class="best" @click="kind=0" style="transition: all 0.2s ease-in;" :style="{borderBottom: kind==0 ? '7upx solid rgba(14,176,201,1)' : ''}">
						最热
					</view>
					<view class="lastest" @click="kind=1" style="transition: all 0.2s ease-in;" :style="{borderBottom: kind==1 ? '7upx solid rgba(14,176,201,1)' : ''}"> 
						最新
					</view>
				</view>
				<view class="filterBar" :style="{height: cardHeight*0.05+'px', width: cardWidth+'px'}" style="margin-top: 26upx;display: flex;flex-direction: row;display:flex;align-items: center;flex-direction: row;">
					<span id="mask" :style="{height: cardHeight*0.051+'px'}"></span>
					<view class="chosenTags" :style="{height: cardHeight*0.038+'px', width: cardWidth*0.82+'px'}">
						<view class="tags" :style="{height: cardHeight*0.038+'px', width: cardWidth*0.85+'px'}">
							<uni-tag v-for="(item, index) in chosenTags" :key="index" :text="item.tagName" type="default" size="small" class="showTags"
									 style="margin-right: 18upx;"></uni-tag>
						</view>
					</view>
					<view class="beginFilter" @click="filter">
						<u-icon style="margin-left: 40upx;" name="grid" color="rgba(198, 198, 198, 1.0)" size="55"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="main" :style="{height:cardHeight*0.87+'px' ,width: cardWidth*0.93+'px'}">
				<view class="listContainer">
					<view class="ever" v-for="(item, index) in list" :key="index" @click="seeDetail(item)">
						<view class="cover">
							<image :src="item.cover" mode="aspectFill" style="width: 220upx; height: 220upx;"></image>
						</view>
						<view class="mainInfo">
								<view class="teamMain">
<!-- 									<view class="leader">
										<u-avatar></u-avatar>
										<view class="nickName">
											{{}}
										</view>
									</view> -->
									<view class="teamName">
										{{item.title}}
									</view>
								</view>
								<view class="description">
									{{item.description}}
								</view>
								<view class="teamTags">
									<!-- <uni-tag v-for="(item, index) in teamTags" :key="index" :text="item.tagName" type="default" size="small" class="showTags"
											 style="margin-right: 18upx;"></uni-tag> -->
								</view>
								<view class="deadLine">
									<view class="scale">
										招募名额:&nbsp; {{item.scale}}
									</view>
									<view class="deadTime">
										截止时间:&nbsp; {{item.deadline}}
									</view>
								</view>
						</view>
					</view>
						<view class="seeMore">
							<u-loadmore 
								:fontSize="24"
								color="#c7c7c7"
								:iconSize="26"
								:status="loadStatus" 
								@loadmore="getMore"
								loading-text="正在获取" 
								loadmore-text="查看更多" 
								nomore-text="没有更多了" 
								lineColor="#dfdfdf"
								:dashed="false"
								line
							/>
						</view>
				</view>
			</view>
		</u-skeleton>
		
			<uni-popup :show="filterShow" ref="filterPage" :is-mask-click="true" @maskClick="closefilter">
		        <view class="filterPart" :style="{height:filterHeight+'px', width: cardWidth*0.85+'px', marginTop: statusBarHeight+'px'}">
		            
		        </view>
			</uni-popup>
		
		<uni-popup :show="openDetail" ref="competitionDetail" :is-mask-click="true" @maskClick="closeDetail">
			<view class="competitionDetail" :style="{width:cardWidth*0.9+'px', height: cardHeight+'px'}" >
				<u-skeleton :loading="detailLoading" :rows="4" :title="false" :rowsWidth="[cardWidth*1.6, cardWidth, cardWidth*1.6, cardWidth*1.6]" :rowsHeight="[cardHeight, cardHeight*0.2, cardHidth, cardHeight*0.5]">
					<view class="wholeCover" :style="{height: cardHeight*0.5+'px', width: cardWidth*0.9+'px', backgroundImage: `url(${competitionDetail.cover})` ,backgroundSize: 'cover', backgroundPosition: 'center'}">
<!-- 						<view style="	position: absolute;
										top: 20px;
										right: 30px;
										border-radius: 10rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										width: 90upx;
										height: 35upx;
										padding: 10upx;
										font-size: 0.8rem;
										box-shadow: 2upx 4upx 10upx rgba(0,0,0,0.3);
										font-weight: 600;
										letter-spacing: 2upx;
										background-color: white;
										color: black;">
							{{competitionDetail.status}}
						</view> -->
						
						<view class="mask"  :style="{top: cardHeight*0.3+'px'}"
											style="	position: relative;
													height: 40%;
													width: 100%;
													backdrop-filter: blur(5 upx);
													background-image: linear-gradient(to top, rgba(71, 71, 71, 1),  rgba(71, 71, 71, 0.6),rgba(116, 116, 116, 0));">
							<view class="scale" :style="{top: cardHeight*0.15+'px', left: cardWidth*0.05+'px'}">
								<span>招募人数: &nbsp;</span>
								{{competitionDetail.member.length-1}}/{{competitionDetail.scale}}
							</view>
						</view>
					</view>
					<view class="header">
						{{competitionDetail.title}}
					</view>
						<view class="createBy" @click="seeHome(competitionDetail.createBy.id)">
							<u-avatar :src="competitionDetail.createBy.avatar" :size="44" style="border: 4upx solid rgb(255,215,0);"></u-avatar>
							<view class="name">{{competitionDetail.createBy.nickname}}</view>
						</view>
					<view class="introduce">
						<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(82,82,136);">队伍介绍: </span> <br/>
						<view style="display: flex;flex-direction: column;flex-wrap: wrap;margin-left: 30upx; margin-top: 20upx;word-wrap: break-all;word-break: normal;">
							{{competitionDetail.description}}
						</view>
					</view>
					
					<view>
						<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(240,55,82);">队员:</span>
						<view class="memberBox">
							<view v-for="(index) in competitionDetail.scale" :key="index">
								<view class="" v-if="index+1 > memberSize">
									<u-avatar icon="plus" fontSize="30" size="70"></u-avatar>
								</view>
								<view class="" v-else @click="seeHome(competitionDetail.member[index].id)">
									<u-avatar :src="competitionDetail.member[index].avatar" :style="{border: `4upx solid ${index==0?'rgb(39, 198, 255)':'rgb(255,255,255)'}`}" :size="70" style="border: 2upx solid white;"></u-avatar>
									<view style="font-size: 0.7rem;margin-top: 8upx;">
										{{competitionDetail.member[index].nickname}}
									</view>
								</view>
							</view>
						</view>
					</view>	
					
					<view class="school" style="margin-top: 30upx;">
						<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(93,190,138);">学校</span>
						<view class="schoolTag">
							<u-tag :inverted="true" :text="competitionDetail.school" type="primary" size="mini" style="display: table;margin-top: 12upx; margin-left: 20upx;padding-left: 8upx;padding-right: 8upx;"></u-tag>
						</view>
					</view>
					
					<view style="margin-top: 40upx;"> 
						<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(97,100,159);">招募截止日期</span>
						<view class="schoolTag" style="margin-top: 12upx; margin-left: 30upx;">
							{{competitionDetail.deadline}}
						</view>
					</view>
				</u-skeleton>
			</view>
			<view class="footer" :style="{top: cardHeight+'px'}">
				<view class="join" @click="join(competitionDetail.id)" style="background-color: rgba(235, 170, 6, 0.5);color: rgba(255, 255, 255, 1.0);">
					{{competitionDetail.joinStatus}}
				</view>
				<view class="contact" style="border-left: 1upx solid rgba(19,72,87,0.1);" @click="contact(competitionDetail.createBy)">
					联系发布人
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default{
		props:{
			cardWidth:{
				type: Number,
				default:0,
				required: true
			},
			cardHeight:{
				type: Number,
				default:0,
				required: true
			}
		},
		data(){
			return {
				kind:0,
				loading: true,
				page: 1,
				pageSize: 8,
				loadStatus: 'loadmore',
				range: 0,
				filterShow: false,
				screenHeight: 0,
				filterHeight:0,
				statusBarHeight: 0,
				memberSize: 0,
				chosenTags:[],
				allTags:[],
				temporaryTags:[],
				chosenTags:[
					{
						id: 1,
						tagName: '计算机设计大赛'
					},
					{
						id: 2,
						tagName: '挑战杯'
					},
					{
						id: 3,
						tagName: '互联网+'
					},
					{
						id: 4,
						tagName: '盛特杯'
					},
					{
						id: 5,
						tagName: '大创'
					},
					{
						id: 6,
						tagName: '服务外包创新创业大赛'
					}
				],
				detailLoading: false,
				openDetail: false,
				timeUtil: new Date(),
				competitionDetail:{
					joinStatus:'',
					teamTags:[],
					member:[
						{
						  id: "",
						  userName: "root",
						  nickname: "",
						  avatar: "",
						  school: "",
						  introduce: ""	
						}
					], 
					id: '',
					title: '',
					cover:'',
					description: '',
					scale: '',
					type: '', //校内 or 全国
					school: '',
					deadline: '',
					gmCreate: '',
					gmModified: '',
					createBy: {}, //队伍创建人
					status: '',
				}
			}
		},
		methods:{
			load(){
				this.$refs.description.init()
			},
			openFilter(){
					this.filterShow = true
			},
			clearObj(obj){
				Object.keys(obj).forEach((key) => {
					obj[key] = ''
				})
			},
			init(){
				this.loading = true
				uni.request({
					url:`http://162.14.102.246:8090/team/front/recruitment/${this.page}/${this.pageSize}`,
					method:'POST',
					header:{
						xdzn_token: this.$store.state.loginUser.token,
						'Content-Type':'application/json'
					},
					data:{
					  key: "",
					  start: "",
					  end: "",
					  scale: 0,
					  tagList: []
					}
				}).then(res => {
					//console.log(res)
					if(res.data.code == 200){
						//console.log(res.data.data)
						this.page++
						let data = res.data.data.list
						data.forEach(item => {
							if(item.deadline){
								item.deadline = item.deadline.substring(0,10)
							}
						})
						this.$store.state.allCompetitionTeam = data
					}
					this.loading = false
				})
				
				uni.getSystemInfo({
					success: res => {
						this.filterHeight = res.screenHeight-50-res.statusBarHeight
						this.statusBarHeight = res.statusBarHeight
					}
				})
				
			},
			//需要重写
			getJoinStatus(item){
				//console.log(item)
				let deadline = parseInt(item.deadline.replace(/-/g, ''))
				let nowDate = parseInt(this.timeUtil.toLocaleDateString().replace(/\//g, ''))
				if(nowDate < deadline){
					let flag = this.userTeams.find(obj => obj.id == item.id)===undefined ? false : true
						//console.log(flag)
					if(flag == true){
						return '已加入'
					}else{
						return '加入队伍'
					}
				}else{
					return '报名'
				}
			},
			contact(item){
				uni.navigateTo({
					url:'/pages/components/chatPage?info='+encodeURIComponent(JSON.stringify(item)),
					success: () => {
						this.$store.state.webSocketUtil.toUser = item.id
					}
				})
			},
			seeDetail(item){
				//console.log('state里现有的list: ', this.list)
				//console.log('传入的简略信息',item)
				this.openDetail = true
				//this.detailLoading = true
				this.$refs.competitionDetail.open('center')
				
				uni.request({
					url:`http://162.14.102.246:8090/team/front/recruitment/${item.id}`,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					//console.log('获得的详细信息',res.data)
					if(res.data.code == 200){
						 this.clearObj(this.competitionDetail)
						 let data = res.data.data.recruitment
						 data.deadline = item.deadline 
						 if(data.gmtCreate){
							data.gmCreate = data.gmtCreate.substring(0,8)
						 }
						 
						 this.competitionDetail = data
						 this.competitionDetail.joinStatus = this.getJoinStatus(item)
						 this.detailLoading = false
						 this.memberSize = this.competitionDetail.member.length
						 //console.log(this.competitionDetail)
						 //console.log(this.competitionDetail)
						 // this.$nextTick(() => {
							//  this.$refs.readMore.init()
						 // })
						 //console.log('after',this.competitionDetail)
						// this.competitionDetail.id = item.id,
						// this.competitionDetail.summary = data.activitySummary
						// this.competitionDetail.title = data.activityTitle
						// //手机不能用replaceAll,要替换多个字符应该用正则表达式
						
						// let start = data.start.replace(/[\:T\-]/g,'').substring(0, 14)
						// let end = data.end.replace(/[\:T\-]/g,'').substring(0, 14)
						// this.competitionDetail.status = this.compareTime(start, end)
						// this.competitionDetail.start = data.start.substring(5,16).replace('T',' ')
						// this.competitionDetail.end = data.end.substring(5,16).replace('T',' ')
						// this.competitionDetail.scale = data.scale
						// this.competitionDetail.text = data.text
						// this.competitionDetail.cover = item.cover
						// this.detailLoading = false,
						// this.competitionDetail.publisher = data.publisher
						
					}else{
						setTimeout(() => {
							this.openDetail = false
							//this.detailLoading = false
						}, 1600)
						
						uni.showToast({
							icon:'error',
							title: '遇到错误',
							duration:1500
						})
					}
				})
			},
			seeHome(id){
				uni.request({
					method:'GET',
					url:`http://162.14.102.246:8090/user/front/homePage/${id}`,
					header:{
						xdzn_token: this.$store.state.loginUser.token
						
					}
				}).then(res => {
					//console.log('获取数据',res.data.data.home)
					this.openDetail = false
					this.$refs.competitionDetail.close()
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/otherUserHome?info="+encodeURIComponent(JSON.stringify(res.data.data.home)),
						// success: () => {
						// 	this.openDetail = false
						// 	this.$refs.competitionDetail.close()
						// }
					})
				})
			},
			join(id){
					//console.log(this.competitionDetail.joinStatus)
					let flag = this.competitionDetail.joinStatus == '加入队伍' ? 1 : 0
						
					if(flag && ++this.competitionDetail.member.length != this.competitionDetail.scale){
						uni.request({
							url:`http://162.14.102.246:8090/team/front/recruitment/${id}/${flag}`,
							methods:'GET',
							header:{
								xdzn_token: this.$store.state.loginUser.token
							}
						}).then(res => {
							//console.log(res.data)
							if(res.data.code == 200){
								
								let wait = this.list.find(obj => obj.id == id)
								let has = this.$store.state.loginUser.team.find(obj => obj.id == wait.id)
								if(has === undefined){
									this.$store.state.loginUser.team.push(wait)
									this.competitionDetail.member.push({
										id: this.$store.state.loginUser.userBaseInfo.id,
										userName: this.$store.state.loginUser.userBaseInfo.userName,
										nickName: this.$store.state.loginUser.userBaseInfo.nickname,
										avatar: this.$store.state.loginUser.userBaseInfo.avatar,
										school: this.$store.state.loginUser.userBaseInfo.ownInfo.school,
										introduce: this.$store.state.loginUser.userBaseInfo.introduce
									})
									this.competitionDetail.joinStatus = '已加入'
									this.$forceUpdate()
									//console.log(this.competitionDetail.joinStatus)
								}
							}
						})
					}else{
						uni.showToast({
							icon:"error",
							title:'无法加入',
							duration:1500
						})
					}
				
			},
			getMore(){
				this.loadStatus = 'loading'
				uni.request({
					url:`http://162.14.102.246:8090/team/front/recruitment/${this.page}/${this.pageSize}`,
					method:'POST',
					header:{
						xdzn_token: this.$store.state.loginUser.token,
						'Content-Type':'application/json'
					},
					data:{
					  key: "",
					  start: "",
					  end: "",
					  scale: 0,
					  tagList: []
					}
				}).then(res => {
					//console.log(res)
					if(res.data.code == 200){
						//console.log(res.data.code)
						let data = res.data.data.list
						
						if(data.length == 0){this.loadStatus = 'nomore'; return;}
						
						this.page++
						data.forEach(item => {
							if(item.deadline){
								item.deadline = item.deadline.substring(0,10)
							}
						})
						data.forEach(item => { 
							this.$store.state.allCompetitionTeam.push(item)
						})
					}
					this.loadStatus = 'loadmore'
				})
			},
			filter(){
				this.filterShow = true
				this.$refs.filterPage.open('right')
			},
			
		},
		mounted() {
			this.init()
			//console.log('比赛列表' ,this.list)
		},
		computed:{
			...mapState({
				list: state => state.allCompetitionTeam,
				userTeams: state => state.loginUser.team
			})
		},
		watch:{
			list:{
				handler(newValue, oldValue){
					if(newValue.length != oldValue.length){
						//console.log(this.list)
					}
				}
			},
			kind:{
				handler(newValue, oldValue){
					// this.loading = true
					// if(newValue == 0){
					// 	this.list.sort((obj1, obj2) => {
					// 		//这里需要一个创建时间参数用来匹配
					// 		return obj2.beginTime - obj1.beginTime
					// 	})
					// }else{
						
					// }
					// setTimeout(()=>{
					// 	this.loading = false
					// },618)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.kind{
		display: flex;
		flex-direction: row;
		position: absolute;
		right: 40upx;
		top: 20upx;
	}
	.best{
		margin-right: 30upx;
	}
	.seeMore{
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		margin-top: 20upx;
	}
	.containerC{
		padding-top: 10upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.header{
		display: flex;
		flex-direction: column;
		align-items: center !important;
	}
	.range{
		display: flex;
		position: relative;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: 5upx;
	}
	.chosenTags{
		padding-top: 8upx;
		padding-bottom: 8upx;
		padding-left: 34upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tags{
		position: absolute;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		align-items: center;
	}
	.beginFilter{
		width: 15%;
		height: 71%;
		padding: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#mask{
		position: absolute;
		width: 30upx;
		background-image: linear-gradient(to right, rgba(239, 239, 239, 0), rgba(255,255,255,1));
		right: 17%;
	}
	::v-deep .showTags{
		border-radius: 10upx;
		color: black;
		padding-left: 18upx;
		padding-right: 18upx;
		background-color: #e6e6e6;
		border: 0upx solid white;
		white-space: nowrap;
		display: inline-block;
	}
	.main{
		position: relative;
		top: 80upx;
		padding-top: 10upx;
		overflow-y: scroll;
	}
	.ever{
		width: 100%;
		height: 230rpx;
		background-color: white;
		border-radius: 15upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-shadow: 6upx 10upx 20upx rgba(239, 239, 239, 0.8);
		margin-bottom: 20upx;
		overflow: hidden;
		padding-top: 8upx;
		padding-bottom: 8upx;
		padding-left: 5upx;
		padding-right: 5upx;
	}
	.listContainer{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.cover{
		height: 220upx;
		width: 220upx;
		border-radius:15upx;
		overflow: hidden;
		background-color: aqua;
		margin-left: 5upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mainInfo{
		height: 220upx;
		width: calc(100% - 10upx - 220upx);
		margin-left: 10upx;
		display: flex;
		flex-direction: column;
		padding-bottom: 8upx;
	}
	.teamMaim{
		display: flex;
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.teamName{
		width: 186px;
		height: 90%;
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 1px;
		display: -webkit-box;
		position: relative;
		overflow: hidden;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
/* 	.leader{
		width: 100%;
		height: 20%;
		background-color: coral;
		display: flex;
		flex-direction: row;
		align-items: center;
	} */
	
	.description{
		display: -webkit-box;
		position: relative;
		overflow: hidden;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		font-size: 0.8rem;
		width: 92%;
		height: 4rem;
		position: relative;
		top: 4upx;
		left: 15upx;
		color: rgba(122, 122, 122, 0.8);
	}
	.teamTags{
		width: 92%;
		height: 50upx;
		position: relative;
		top: 4upx;
		margin-left: calc(2.5%);
	}
	.deadLine{
		width: 92%;
		height: 50upx;
		display: flex;
		align-items: center;
		position: relative;
		top: 11upx;
		margin-left: 12upx;
		font-size: 0.73rem;
		font-weight: 500;
		color: #999999;
	}
	.scale{
		float: left;
	}
	.deadTime{
		position: relative;
		left: 20%;
	}
	.competitionDetail{
		background-color: white;
		overflow-y: scroll;
		padding: 20upx 20upx 20upx 20upx;
		position: relative;
		top: -30upx;
	}
	.scale{
		position: absolute;
		font-size: 0.8rem;
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		color: white;
	}
	.header{
		position: relative;
		height: 70upx;
		width: 100%;
		letter-spacing: 10upx;
		color: black;
		font-size: 1.2rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10upx;
		padding-bottom: 10upx;
		border-bottom: 5upx solid darkgrey;
	}
	.createBy{
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		.name{
			margin-left: 10upx;
		}
	}
	.introduce{
		padding-top: 30upx;
		padding-bottom: 30upx;
		border-bottom: 1upx solid rgba(234, 234, 234, 0.5);
	}
	.footer{
		position: absolute;
		width: 100%;
		right: 0;
		height: 50px;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		letter-spacing: 2upx;
		font-weight: bold;
	}
	.join, .contact{
		width: 50%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1upx solid rgba(19,72,87,0.1);
	}
	.memberBox{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.memberBox>view{
		margin-right: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.filterPart{
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		background-color: white;
	}
</style>